<template>
  <a-form :form="form">
    <a-row>
      <a-col :span="24">
        <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.labelGroup','Tab标签组')">
          <rx-textboxlist style="width: 90%;display: inline-block;vertical-align: middle;" ref="tabList"
                          v-model="values"></rx-textboxlist>
          <a-button class="tabButton" @click="selectTabGroups" type="primary">{{$ti18('rxList.newBtn','添加')}}</a-button>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
  import {BaseForm, RxDialog, RxTextBoxList, Util} from "@lowcode/jpaas-common-lib";
  import rxAjax from '@/assets/js/ajax.js';
  import InsColumnDialog from '../InsColumnDialog';
  import insPortalDialogApi from '@/api/portal/core/insPortalDialog';

  export default {
    name: "InsColumnDefTabBel",
    mixins: [BaseForm],
    components: {
      RxDialog, rxAjax, RxTextBoxList, Util, InsColumnDialog, insPortalDialogApi
    },
    props: {
      dataObj: {
        type: Object,
        default: null
      }
    },
    created() {
      if (this.dataObj.tabgroups) {
        if(typeof (this.dataObj.tabgroups) =="string"){
          this.values = JSON.parse(this.dataObj.tabgroups);
        }else {
          this.values = this.dataObj.tabgroups;
        }
      }
    },
    data() {
      return {
        showTextBoxList: true,
        tabgroups: {},
        values: {},
        valuesList: [],
        labelsList: []
      }
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"insColumnDef",key);
      },
      selectTabGroups() {
        var self_ = this;
        insPortalDialogApi.openInsCloumnDefDialog({
          curVm: this, data: {single: false}, widthHeight: ['800px', '600px']
        }, function (self_, data) {
          for (var i = 0; i < data.length; i++) {
            self_.setValuesList(data[i]);
          }
          if(self_.labelsList.length>0){
              let jsonObject = JSON.parse(self_.labelsList[self_.labelsList.length - 1]);
              self_.labelsList[self_.labelsList.length - 1] = jsonObject["zh-CN"];
          }
          var changeValues = {
            value: self_.valuesList.join(","),
            text: self_.labelsList.join(",")
          }
          self_.$refs.tabList.setValues(changeValues, false);
        });
      },
      setTabGroupsToString(groups) {
        this.tabgroups = groups;
        this.setTabGroupsToParse(groups);
      },
      setTabGroupsToParse(val) {
        var groups = val;
        if (groups && groups.value) {
          this.valuesList = groups.value.split(',');
          this.labelsList = groups.text.split(',');
        }
      },
      setValuesList(obj) {
        var colId = obj.colId;
        var name = obj.name;
        if (this.valuesList.indexOf(colId) == -1) {
          this.valuesList.push(colId);
          this.labelsList.push(name);
        }
      },
      valid() {
        return true;
      }
    },
    watch: {
      values(val) {
        if (!val || !val.value) {
          this.valuesList = [];
          this.labelsList = [];
          this.dataObj.tabgroups=val;
          this.$emit("change",this.dataObj);
        } else {
          this.setTabGroupsToString(val);
        }
      },
      tabgroups(val) {
        this.dataObj.tabgroups=val;
        this.$emit("change",this.dataObj);
      }
    }
  }
</script>

<style scoped>
  .tabButton {
    vertical-align: middle;
    margin-left: 10px;
  }
</style>